.comment {
  @include box;

  width: calc(100vw - 40px);
  max-width: calc(100vw - 19%);
  display: block;
  transition: top 0.5s ease 0s, inset-inline-end 0.5s ease 0s,
    height 0.5s ease 0s;
  pointer-events: auto;
  box-sizing: border-box;
  padding-bottom: 0;
  inset-inline-end: -2000px;

  @include media-breakpoint-up(sm) {
    width: calc(100vw - 40px);
    max-width: 400px;
    inset-inline-start: initial;
  }

  @include media-breakpoint-up(md) {
    max-width: 200px;
    inset-inline-end: 0;
  }

  @include media-breakpoint-up(lg) {
    max-width: 275px;
  }

  &--focused {
    inset-inline-end: 35px;

    @include media-breakpoint-up(md) {
      inset-inline-end: 50px;
    }
  }

  &__text {
    color: $color-box-text;
    font-size: 13px;
    line-height: 19px;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;

    &--mode-deleting {
      color: $color-grey-1;
    }
  }

  form {
    border-top: 1px solid $color-comment-separator;
  }

  &--mode-creating form {
    border-top: 0;
    margin-top: 10px;
  }

  &--mode-editing form {
    margin-top: 10px;
  }

  &--mode-deleting &__text {
    color: $color-grey-3;
  }

  &__replies {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  &__button {
    @include button;
  }

  &__actions,
  &__reply-actions {
    padding-bottom: 10px;
  }

  &__actions &__button,
  &__reply-actions &__button {
    margin-inline-end: 10px;
    margin-top: 10px;
  }

  &__confirm-delete &__button {
    margin-inline-start: 10px;
    margin-bottom: 10px;
  }

  &__confirm-delete,
  &__error {
    color: $color-box-text;
    font-weight: bold;
    font-size: 13px;
    margin-top: 10px;

    button {
      float: right;
    }

    &::after {
      display: block;
      content: ' ';
      clear: both;
    }
  }

  &__error {
    color: $color-white;
    background-color: theme('colors.critical.200');
    border-radius: 3px;
    padding: 5px;
    padding-inline-start: 10px;
    height: 26px;
    line-height: 26px;
    vertical-align: middle;

    button {
      height: 26px;
      float: right;
      margin-inline-start: 5px;
      color: $color-white;
      background-color: theme('colors.critical.200');
      border-color: $color-white;
      padding: 2px;
      padding-inline-start: 10px;
      padding-inline-end: 10px;
      font-size: 0.65em;
      font-weight: bold;
    }

    &::after {
      display: block;
      content: '';
      clear: both;
    }
  }

  &__progress {
    margin-top: 20px;
    font-weight: bold;
    font-size: 13px;
  }

  &__reply-input {
    /* stylelint-disable-next-line declaration-no-important */
    margin-top: 20px !important;
  }
}
